<template>
    <div class="main book">
        <div class="classify">
            <div v-for="(item,index) in classify" :key="index" class="classItem">
                <div class="leftTitle">
                    <div class="title">{{ item.title }}:</div>
                </div>
                <div class="rightContent">
                    <div class="class point" @click="updateParams(item, {}, -1)" :class="{Select: item.isSelect == -1}">全部</div>
                    <div v-for="(children,i) in item.list" @click="updateParams(item, children, i)" :key="i" class="class point" :class="{Select:item.isSelect == i}">{{ children.fictionClassName?children.fictionClassName:children.title }}</div>
                </div>
            </div>
        </div>
        <div v-if="BookList.length>0" class="bookList">
            <div v-for="(item,index) in BookList" :key="index" class="bookItem point">
                <div class="imgBox">
                    <el-image
                        style="width: 100%;"
                        :src="item.image"
                        lazy
                        :preview-src-list="[item.image]">
                    </el-image>
                </div>
                <div class="bookInfo" :title="item.fictionInfo">{{ item.fictionName }}</div>
            </div>
        </div>
        <div v-else class="noneBook">
            <el-empty description="暂无书籍"></el-empty>
        </div>
        <div class="Page">
            <el-pagination
            background
            :total="total"
            layout="sizes,prev, pager, next"
            :page-sizes="[16,32]"
            :page-size="query.limit"
            @current-change="PageChange"
            @size-change="TotalChange">

            </el-pagination>
        </div>
    </div>
</template>

<script>
import { bookList, getCategory } from '../../api/book.js'
export default{
    name:"Book",
    data(){
        return {
            BookList : [],
            total : 0,
            classify : [],
            query : {
                sort : undefined,
                fictionClassId : undefined,
                limit : 16,
                page : 1,
                key : undefined,
                minTime : undefined,
                maxTime : undefined,
                minNumWord : undefined,  //小说最小字数【选填】
                maxNumWord : undefined,//小说最大字数【选填】
                isEnd : undefined,
            }
        }
    },
    created(){
        this.getBookList();
        this.getClass();
    },
    methods:{
        updateParams(item, children, index){
            if(item.type == 'class'){
                this.query.fictionClassId = children.fictionClassId
            }else if(item.type == 'sort'){
                this.query.sort = children.sort
            }else if(item.type == 'word'){
                this.query.minNumWord = children.minNumWord
                this.query.maxNumWord = children.maxNumWord
            }else if(item.type == 'updateTime'){
                this.query.minUpdateTime = children.minUpdateTime
                this.query.maxUpdateTime = children.maxUpdateTime
            }else if(item.type == 'status'){
                this.query.isEnd = children.isEnd
            }
            item.isSelect = index;
            this.getBookList();
        },
        getBookList(){
            bookList(this.query).then(res=>{
                this.BookList = res.data.list;
                this.total = res.data.total;
            })
        },
        PageChange(index){
            this.query.page = index;
            this.getBookList();
        },
        TotalChange(index){
            this.query.limit = index;
            this.query.page = 1;
            this.getBookList();
        },
        getClass(){     //获取分类
            getCategory().then(res=>{
                res.data.forEach((current,index)=>{     //默认选中第一项
                    current.isSelect = -1;       //isSelect用于控制选中的分类
                })
                this.classify = res.data;
            })
        }
    }
}
</script>

<style lang="less" scoped>
.book{
    position: relative;
    height: auto;
    .classify{
        .classItem{
            display: flex;
            align-items: center;
            min-height: 50px;
            margin: 5px 0px;
            .leftTitle{
                width: 80px;
                .title{
                    font-weight: 600;
                }
            }
            .rightContent{
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                width: calc(100% - 120px);
                .class{
                    padding: 5px 10px;
                    background: #f5f5f5;
                    margin: 10px 10px 0px 0px;
                    border-radius: 3px;
                    font-size: 14px;
                    color: #8f8f8f;
                }
                .Select{        //当前选中标签的样式
                    background: lightseagreen;
                    // background: #358dff;
                    color: white;
                }
            }
        }
    }
    .bookList{
        width: 100%;
        display: flex;
        // align-items: stretch;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 0px;
        .bookItem{
            position: relative;
            width: calc(~'100% / 8 - 30px');
            margin-right: 20px;
            border-radius: 5px;
            margin-bottom: 40px;
            overflow: hidden;
            box-shadow: 3px 3px 20px 1px rgba(0,0,0,.5);
            &:hover{
                .bookInfo{
                    bottom: 0px;
                }
            }
            .imgBox{
                img{
                    width: 100%;
                    height: 100%;
                    vertical-align: top;
                }
            }
            .bookInfo{
                position: absolute;
                bottom: -100%;
                left: 0px;
                width: 100%;
                height: 50%;
                background: rgba(0,0,0,.7);
                z-index: 100;
                color: white;
                transition: all .3s;
                text-align: center;
            }
        }
    }
    .noneBook{
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content:center;
    }
    .Page{
        position: absolute;
        left: 50%;
        bottom: 0px;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
    }
}
</style>